﻿body {
}
/*html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }*/
/*.wrapper { position: relative; height: 1500px; }*/
.fixed { position: fixed; right:10; top:200; width:75px; height:50px; background: green; text-decoration:none;
	   border-radius: 10px;
/*compitation box */
 }

.word-pos{
/*the position of the word */
position:absolute; left:250px;
}

.l-pos{
/*the letter position*/
position:absolute; left:750px; 
}

* {
  margin: 0;
}
html, body {
  height: 115%;
}
.page-wrap {
  min-height: 95%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer 
{
    
    background-image: url('images/footerimg.png');
    height:250px;
    width:auto;

}

 h2
{
text-align: left;
text-decoration:none;
text-shadow: 5px 5px 5px #FFF;
  
}

 h1
{
text-align: center;
text-decoration:none;
text-shadow: 5px 5px 5px #FFF;
}
body{ background:#C6F8FF ;margin:0px;}
/*-image:"img/backgroundimg.png"*/
div#menubar1
{
     padding: 0px;
      
      text-align:center;
     /*  width:inherit;*/
      background-image: url('images/backgroundimg3.png');
      width:auto;

      }
div#menubar1 > a{
    font-family:Arial, Helvetica, sans-serif;
   font-size:25px;
   background: #BDE551; 
    padding: 8px 15px;
    color:#FFF;
    margin-right: 3px;
      text-decoration:none;
	   border-radius: 7px;
	
   
    -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar1 > a:hover{
    background: orange;
    color:#FFF;
	
}

.flip3d{ width:240px ;  height:200px ; margin:70px ;float:left;}

.flip3d > .front{
position:absolute;

transform: perspective( 600px ) rotateY( 0deg );
background:blue; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
	transition: transform .5s linear 0s;


}
.flip3d > .back{
position:absolute;

transform: perspective( 600px ) rotateY( 180deg );
background:red; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
	transition: transform .5s linear 0s;


}
.flip3D:hover > .front{
	-webkit-transform: perspective( 600px ) rotateY( -180deg );
	transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
}


///////////////////////////////////////////////////////////






.slides {
   padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;


	
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block;


 }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {

position: absolute;
        width: 100px; /*the image width*/
        height: 100px; /*the image height*/
        left: 50%;
        top: 50%;
       

<!--
delet it later :)
 margin-left: -50px; /*half the image width*/
        margin-top: -50px; /*half the image height*/

    width: 100%;
    height: 100%;

	-->
	}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}



     
    
         .header
{
    
    background-image: url('images/backgroundimg.png');
    width:1000px;
}

.login
{
    color:#fff;
    }
    
    
    
    .play
    {
        background-color:#fff;
        width:500px;
        height:500px;
        }
        
        
.my_Div
{
    vertical-align:central;
    width:500px;
    height:500px;
    background-color: white;
}


.number
{
    width:20px;
    height:20px;
    text-align:center;
    font:700;
}

.img
{
    width:60px;
    height:60px;
    background-color:white;
}

#Image1
{
}

#im
{
    width:300px;
   
    }

.clr {
    clear: both;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.slider {
   background: url("../imag/slider_bg.jpg") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    padding: 10px 0 0;
}
